<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="box">
       <input type="text" v-model="msg">
       <p>
           <input type="text" v-model="deepObj.name">
       </p>
       <p>
        <input type="text" v-model="userObj.name">
    </p>
    </div>
    <!-- computed:计算属性的结果会被缓存 如果之前有缓存值就不会每次都调用 -->
    <script src="./js/vue.js"> </script>
    <script>
        let vm = new Vue({
            el:'#box',
            data:{
              msg:'hello',
              deepObj:{name:'张三'},
              userObj:{name:'李四'}
            },
            computed:{
                newName(){
                    return this.userObj.name;
                }
            },
            watch:{
                msg(newName,oldName){
                    console.log("watch-msg",newName,oldName);
                },
                // 对象属性发生变化时侦听不到
                // deeObj(newName,oldName){
                //     console.log("watch-deeObj",newName,oldName);
                // }
                // 正确方法：
                deepObj:{
                    // handler 固定的方法，不能改
                    handler(newName,oldName){
                        console.log("watch-deeObj",newName.name,oldName.name);
                    },
                    deep:true  //默认时false true表示深度监听
                },
                newName(newName,oldName){
                    console.log("watch-newName",newName,oldName);
                }
            }
        })
    </script>
</body>
</html>